<template>
  <div id="tab-bar">
   <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "TabBar"
  }
</script>

<style scoped>
  #tab-bar{
    /*  弹性布局*/
    display: flex;
    background-color: #f6f6f6;

    /*  定义元素的定位类型
        fiexd：是相对浏览器窗口进行定位的，可根据right、left、top、bottom这几个设置属性规定位置
    */
    position: fixed;
    /*  保证占比是整个屏幕的宽度，所以是0*/
    right: 0;
    left: 0;
    /*  让他放入底部*/
    bottom: 0;
    /*
    这个就将整个div如何移动
    前三个参数为： x偏移正往右偏，y偏移正往下偏，模糊程度，
    rgba：为红色red，绿色green，蓝色blue，alpha模糊程度0~1，值越小越模糊
    */
    box-shadow: 0px -1px 2px rgba(100, 100, 100, .1);
  }
</style>
